<template>
	<div>
		<!-- 上边栏 -->
		<div class="topbar bg-black d-flex py-2 px-3 ai-center">
			<img src="../assets/logo.png" height="30">
			<div class="px-2 flex-1"> <!-- flex-1 撑满剩余空间-->
				<div class="text-white">王者荣耀</div>
				<div class="text-grey-1 fs-xxs">团队成就更多</div>
			</div>
			<button type="button" class="btn bg-primary">立即下载</button>
		</div>
		<!-- 导航 -->
		<div class="bg-primary pt-3 pb-2"><!-- 背景，内边距 -->
			<div class="nav nav-inverse pb-1 jc-around pb-1"><!-- 边框 -->
				<div class="nav-item active"><!-- 实现高亮 -->	
					<router-link class="nav-link" tag="div" to="/">首页</router-link>
				</div>
				<div>
					<router-link class="nav-link" tag="div" to="/">攻略中心</router-link>
				</div>
				<div>
					<router-link class="nav-link" tag="div" to="/">赛事中心</router-link>
				</div>
			</div>
		</div>

		<router-view></router-view>
	</div>
</template>

<script>
export default {

}
</script>


<style lang="scss">
// sticky：粘性定位元素
// 粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。https://developer.mozilla.org/zh-CN/docs/Web/CSS/position
.topbar {
  position: sticky;
  top: 0;
  z-index: 999;
}
</style>